一、起心動念

三大框架都碰過，但 Vue.js 以 簡潔語法與輕量特性 讓我著迷。

曾喜愛過小眾框架 Riot.js，它的雙向綁定和 template 語法糖也曾讓我愛不釋手。

對表格與表單處理的流暢體驗特別有感。

二、寫作思路

我希望透過需求目的分析完後，真正想要達成目的需要的技術著手~

而不從「名詞解釋」出發，而是 「想做什麼」→「需要哪些條件」→「對應的 Vue 功能」。

例：要做表單送出，就先想

1. 需求條件與狀態
2. 帶出所需的UI Flow
3. 需要的語法糖 v-model、watch、ref。

例如下列範例:

目標：送出「聯絡我們」表單（姓名、Email、訊息） 需求條件與狀態

• 必填欄位：name, email, message

• Email 格式需正確

• 只有在「資料完整且通過驗證」時，送出按鈕才可點

• 送出後顯示 loading；成功顯示「送出成功」、失敗顯示錯誤

• 主要狀態（state）

身為軟體工程師還是要朝邏輯思路、跟最終要達成的目的著手比較好唷!!

三、系列目標

這30 天我會把每一篇當作說故事的樣子來玩vue.js

每篇文章會包含：需求描述、使用者故事、系統條件、Mermaid 流程圖、Demo 範例。

整體規劃與預告

概覽每週章節的主題與必備工具。

四、學習架構圖表

五、各章節連結

這邊會把後續的每個章節標題跟link放到這邊來